<template>
    <div class="center">
      <div style="width: 100%;height: 60px;border-bottom: #1C97FF 1px solid;padding:  10px 20px;display: flex;">
        <img style="width: 340px; height: 40px; margin-right: 20px;" src="@/assets/bigScreen/index/LOGO.jpg" alt="">
        <big-tab-Bar />
      </div>
      <div class="project-list">
        <el-button type="primary" style="background-color: #1C97FF;margin-bottom: 20px;float: right;" icon="el-icon-plus" @click="handleAdd">新增企业</el-button>
        <el-table v-loading="loading" :data="infoList">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column label="名称" align="center" prop="enterpriseName" />
          <el-table-column label="企业类型" align="center" prop="enterpriseType" >
            <template slot-scope="scope">
              {{selectDictLabel($store.state.referenceDict.enterpriseType, scope.row.enterpriseType)}}
            </template>
          </el-table-column>
          <el-table-column label="企业状态" align="center" prop="enterpriseStatus" >
            <template slot-scope="scope">
              {{selectDictLabel($store.state.referenceDict.enterpriseStatus, scope.row.enterpriseStatus)}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center"  class-name="small-padding fixed-width" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="whiteText" icon="el-icon-edit" @click="intoEnterpriseStep(scope.row)">数据配置</el-button>
              <el-button size="mini" type="whiteText" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="whiteText" icon="el-icon-delete" @click="delFun(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination project-select="projectSelect" v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-sizes="[10,15]" @pagination="getList"/>
      </div>
      <enterprise-Info  ref="enterpriseInfoRef" @fatherGoPath="getList" />
      <emission-carbon-stage-form  ref="emissionCarbonStageFormRef" />
    </div>
  </template>
  <script>
  import { delEnterprise, listEnterprise } from "@/api/enterprise/enterprise";
  import resize from "@/views/dashboard/mixins/resize";
  import bigTabBar from '@/views/components/bigTabBar/index';
  import enterpriseInfo from "@/views/bigScreen/runCarbonEmission/enterprise-info.vue";
  import EmissionCarbonStageForm from "@/views/bigScreen/runCarbonEmission/EmissionCarbonStageForm.vue";
  export default {
    name: "project-index",
    mixins: [resize],
    components: {
        bigTabBar,enterpriseInfo,EmissionCarbonStageForm
    },
    data() {
      return {
        isMobile:false,
        barChartTitle: '',
        // 遮罩层
        loading: true,
        // 项目列表表格数据
        infoList: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 15,
          parentId: null,
          enterpriseName: null,
          enterpriseType: null,
          enterpriseStatus: null,
          creationTime: null,
          deleteTime: null
        },
        pdfDrawer: false,
        direction: 'rtl',
      }
    },
    watch: {},
    created() {
      this.isMobile = document.documentElement.offsetWidth<501;
      this.getList();
    },
    mounted() {},
    methods: {
      getList() {
        this.loading = true;
        listEnterprise(this.queryParams).then(response=>{
          this.infoList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
      },
      handleAdd() {
        this.$refs.enterpriseInfoRef.handleAdd()
      },
      handleUpdate(row){
        this.$refs.enterpriseInfoRef.handleUpdate(row)
      },
      delFun(row){
        const id = row.id;
        this.$confirm('是否确认删除当前的项目?', "警告", {
          confirmButtonClass:"el-button--projectBut",
          cancelButtonClass:"el-button--projectCan",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delEnterprise(id);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
          this.loading = false;
        });
      },
      intoEnterpriseStep(row){
        this.$store.commit('SET_ENTERPRISE_ID', row.id);
        this.$refs.emissionCarbonStageFormRef.handleShow()
        // this.$router.push({name: "enterpriseStepPage",params:{
        //     enterpriseId:row.id,
        //     enterpriseType:row.enterpriseType,
        //     enterpriseName:row.enterpriseName,
        //   }});
  
  
      },
  
    },
  }
  </script>
  <style lang="scss" scoped>
  .center{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000D17;
    // background: url("../../assets/bg2.jpg") no-repeat;
    // background-size: 100% 100%;
  }
  .btn-close{
    position: absolute;
    top: 12px;
    right: 140px;
    color: #FFF;
    font-size: 21px;
    padding: 7px;
    line-height: 20px;
    border-radius: 50%;
    cursor: pointer;
    &:hover{
      background-color: #424649;
    }
  }
  .project-list{
    position: absolute;
    z-index: 2;
    width: 100%;
    // height: 88%;
    height: calc(100% - 60px);
    right: 0px;
    padding: 20px;
    //background-color:rgba(0,0,0,0.2);
    ::v-deep{
      .el-table{
        height: 100%;
      }
      .has-gutter{
        background-color: #2E98CA;
      }
      .el-table .el-table__row:hover td{
        cursor: pointer;
        background-color: rgba(#00afff,0.5) !important;
      }
      .el-table--medium td{
         padding: 6px 0 ;
      }
      .el-table,.el-table::before,.el-table th.el-table__cell,.el-table tr{
        background-color: transparent !important;
      }
      .el-table--scrollable-y .el-table__body-wrapper {
        overflow-y: hidden;
      }
      .el-table .el-table__header-wrapper th,.el-table--enable-row-transition .el-table__body td{
        color: #FFFFFF;
        background-color: transparent !important;
      }
      .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
        border-bottom: none;
        color: #FFFFFF;
        background-color: transparent !important;
      }
      .pagination-container{
        background:transparent !important;
      }
      .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #409EFF !important;
        color: #FFFFFF;
      }
      .el-pagination.is-background .el-pager li:not(.disabled):hover{
        background-color: #409EFF !important;
        color: #FFFFFF;
      }
    }
  }
  @media screen and (min-width:300px) and (max-width:500px){
    .map-right{
      width: 92% !important;
      height: 80% !important;
      top: 5vh;
      ::v-deep{
        .el-table__row td{
          padding: 7px 0px;
        }
      }
    }
    .pagination-container{
      width: 100%;
    }
    .pagination-container /deep/{
      .el-pagination{
        left: 50%;
        right: unset;
        transform: translateX(-50%);
        .el-pager li{
          margin: 0 2px;
        }
      }
      .el-pagination__sizes,.el-pagination__total,.el-pagination__jump{
        display: none;
      }
    }
  
  }
  </style>
  